<template>
  <div :class="[prefixCls, getLayoutContentMode]" v-loading="getOpenPageLoading && getPageLoading">
    <div id="content" ref="content" class="app-view-box" v-if="openQianKun == 'true' && isother"></div>
    <PageLayout v-else />
    <!-- update-end-author:zyf date:20211129 for: qiankun 挂载子应用盒子-->
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue';
  import PageLayout from '/@/layouts/page/index.vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
  import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
  import { useContentViewHeight } from './useContentViewHeight';
  import { microappService } from '/@/qiankun';
  import { useGlobSetting } from '/@/hooks/setting';
  import { useAppStoreWithOut } from '/@/store/modules/app';
  import { useLocale } from '/@/locales/useLocale';
  import { useRoute } from 'vue-router';

  export default defineComponent({
    name: 'LayoutContent',
    components: { PageLayout },
    setup() {
      const { prefixCls } = useDesign('layout-content');
      const { getOpenPageLoading } = useTransitionSetting();
      const { getLayoutContentMode, getPageLoading } = useRootSetting();
      const globSetting = useGlobSetting();
      const appStore = useAppStoreWithOut();
      const { getLocale } = useLocale();
      const route = useRoute();
      const openQianKun = globSetting.openQianKun;
      let shareDate = computed(() => {
        return {
          local: getLocale.value,
          themeColor: appStore.getProjectConfig?.themeColor,
          themeMode: appStore.getDarkMode,
        };
      });
      let content = ref(null);
      // TODO: 临时处理轻应用404

      watch(
        () => shareDate.value,
        (val) => {
          microappService.setGlState(val);
        },
        { immediate: true }
      );

      useContentViewHeight();
      let micapps = [
        {
          name: 'apps',
          entry: '/apps/desktop.html',
          pathname: '/micapp',
        },
        {
          name: 'ego_app',
          entry: '/ego_app/index.html',
          pathname: '/micdesign',
        },
      ];
      const isother = computed(() => {
        return micapps.some((item) => {
          return route.fullPath.startsWith(item.pathname);
        });
      });
      onMounted(() => {
        //注册openQianKun
        if (openQianKun == 'true') {
          if (!window.qiankunStarted) {
            window.qiankunStarted = true;
            console.log(micapps, isother, 'micapps');
            microappService.init(content.value, micapps);
          }
        }
      });
      const layoutPadding = computed(() => (unref(isother) || route.fullPath.startsWith('/frame') ? 0 : '16px'));
      const isOverflowAuto = computed(() => (unref(isother) || route.fullPath.startsWith('/frame') ? 'initial' : 'auto'));
      return {
        prefixCls,
        openQianKun,
        getOpenPageLoading,
        getLayoutContentMode,
        layoutPadding,
        getPageLoading,
        isother,
        isOverflowAuto,
        content,
      };
    },
  });
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-layout-content';
  .@{prefix-cls} {
    position: relative;
    // flex: 1 1 auto;
    min-height: 0;
    // padding: v-bind(layoutPadding);
    box-sizing: border-box;
    // height: calc(100vh - 100px);
    margin: v-bind(layoutPadding);
    flex: 1;
    overflow: v-bind(isOverflowAuto);

    &.fixed {
      width: 1200px;
      margin: 0 auto;
    }

    &-loading {
      position: absolute;
      top: 200px;
      z-index: @page-loading-z-index;
    }
  }
  //qiankun集成应用可将height设置为100%
  .app-view-box {
    height: 100%;
  }
</style>
